<template>
  <view class="wrap">
    <image
      class="sport-feedback-bg"
      src="https://ainengli.hzjrsw.com/jkhx/common/sport-feedback-bg.png"
      mode="scaleToFill"
    />
    <view class="feedback-box">
      <view class="title">
        <view class="title-icon" />
        <text class="title-text">运动反馈</text>
      </view>
      <view class="feedback-steps">
        <view class="title-tips">请选择最符合您当前状态的分值</view>

        <view class="slider-container">
          <!-- 刻度值 -->
          <view class="scale-wrap">
            <view
              v-for="(n, index) in scaleValues"
              :key="n"
              class="scale-item"
              :style="{ left: `${calculateLeft(n)}%` }"
            >
              <view
                :class="[
                  'scale-line',
                  index === 0 || index === scaleValues.length - 1 ? 'scale-line-long' : ''
                ]"
              />
              <text class="scale-text">{{ n < 10 ? '0' + n : n }}</text>
            </view>
            <!-- 指针 -->
            <view
              class="pointer"
              :style="{ left: `${pointerPosition}%` }"
              @touchstart="onTouchStart"
              @touchmove="onTouchMove"
              @touchend="onTouchEnd"
            >
              <view class="pointer-value">{{ currentValue }}</view>

              <view class="point-wrap">
                <image
                  class="point-image"
                  src="https://ainengli.hzjrsw.com/jkhx/common/down.png"
                  mode="scaleToFill"
                />
                <view class="point-line" />
              </view>
            </view>
          </view>
        </view>

        <view class="state-box">
          <view
            class="state-item"
            v-for="(item, index) in stateList"
            :key="index"
            :style="{ backgroundColor: item.color }"
          >
            <text>{{ item.name }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="fixed">
      <button @tap="submit" class="fix-btn">提交</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { sport_feedback } from './api'

const params = reactive({
  sportsId: '',
  patPlanId: '',
  sportType: '',
})
const userInfo = ref({})

const stateList = reactive([
  {
    name: '非常轻松',
    color: '#00D1B6'
  },
  {
    name: '轻松',
    color: '#5C8EFF'
  },
  {
    name: '吃力',
    color: '#FF813C'
  },
  {
    name: '非常吃力',
    color: '#FF503D'
  }
])

const minValue = 6 // 最小值
const maxValue = 20 // 最大值
const scaleValues = Array.from({ length: maxValue - minValue + 1 }, (_, i) => minValue + i) // 刻度值数组

const sliderWidth = ref(0)
const padding = 32
const currentValue = ref<any>((minValue + maxValue) / 2)
const pointerPosition = ref(50)

const calculateLeft = (n: number) => {
  const paddingPx = uni.upx2px(padding)
  const availableWidth = sliderWidth.value - 2 * paddingPx
  const positionPx = ((n - minValue) / (maxValue - minValue)) * availableWidth
  const positionPercent = ((paddingPx + positionPx) / sliderWidth.value) * 100
  return positionPercent
}

// 获取滑动条宽度
onMounted(() => {
  const query = uni.createSelectorQuery()
  query
    .select('.slider-container')
    .boundingClientRect((data) => {
      if (data) {
        sliderWidth.value = data.width // 获取容器宽度
      }
    })
    .exec()
})

// 触摸逻辑
let startX = 0
let startPointerPosition = 0

const onTouchStart = (event: TouchEvent) => {
  startX = event.touches[0].clientX
  startPointerPosition = pointerPosition.value
}

const onTouchMove = (event: TouchEvent) => {
  const moveX = event.touches[0].clientX - startX
  const paddingPx = uni.upx2px(padding)
  const availableWidth = sliderWidth.value - 2 * paddingPx

  let newPositionPx = startPointerPosition * (availableWidth / 100) + moveX
  newPositionPx = Math.max(0, Math.min(availableWidth, newPositionPx))

  pointerPosition.value = (newPositionPx / availableWidth) * 100

  const scalePosition = (pointerPosition.value / 100) * (maxValue - minValue)
  const newValue = Math.round(minValue + scalePosition)
  currentValue.value = newValue < 10 ? '0' + newValue : newValue
}

const onTouchEnd = () => {
  const paddingPx = uni.upx2px(padding)
  const availableWidth = sliderWidth.value - 2 * paddingPx
  const nearestValue = Math.round(currentValue.value) // 找到最近的刻度值
  currentValue.value = nearestValue < 10 ? '0' + nearestValue : nearestValue

  // 更新指针位置
  const newPositionPx = ((nearestValue - minValue) / (maxValue - minValue)) * availableWidth
  pointerPosition.value = ((paddingPx + newPositionPx) / sliderWidth.value) * 100
}

onLoad((options: any) => {
  userInfo.value = JSON.parse(uni.getStorageSync('userInfo')).patientInfo
  params.sportsId = options && options.sportsId ? options.sportsId : ''
  params.patPlanId = options && options.patPlanId ? options.patPlanId : ''
  params.sportType = options && options.sportType ? options.sportType : ''
})

const submit = () => {
  let param = {
    empi: userInfo.value.empi,
    sportId: params.sportsId,
    patPlanId: params.patPlanId,
    sportType: params.sportType,
    pre: Number(currentValue.value)
  }
  sport_feedback(param).then((res: any) => {
    if (res.code == 0) {
      uni.redirectTo({ url: '/module/src/pages/sports/sportsPlan/index' })
    }
  })
}

</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100vh;
  padding: 0;
  overflow: hidden;
}

.sport-feedback-bg {
  width: 100%;
  height: 328rpx;
}

.feedback-box {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 48rpx 0;
  position: relative;
  top: -88rpx;
  height: 496rpx;

  .title {
    margin-bottom: 8rpx;
    display: flex;
    align-items: center;
    height: 50rpx;

    .title-icon {
      width: 8rpx;
      height: 32rpx;
      background: #00d1b6;
      border-radius: 0 4rpx 4rpx 0;
      margin-right: 24rpx;
    }

    .title-text {
      font-weight: 600;
      font-size: 36rpx;
      color: #222222;
    }
  }

  .feedback-steps {
    .title-tips {
      padding: 0 32rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #666666;
    }
  }
}

.slider-container {
  padding: 0 16rpx;
  position: relative;
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  top: 112rpx;
}

.scale-wrap {
  position: relative;
  width: 100%;
  height: 50px;
}

.scale-item {
  position: absolute;
  height: 108rpx;
  //   text-align: center;
  //   display: flex;
  //   flex-direction: column;
  //   align-items: center;
}

.scale-line {
  width: 2rpx;
  height: 22rpx;
  background-color: #e3e3e3;
  margin-bottom: 24rpx;
  transform: translateX(-50%);
}

.scale-line-long {
  width: 4rpx;
  height: 50rpx;
  background-color: #c6c6c6;
}

.scale-line-blod {
  width: 4rpx;
  height: 50rpx;
  background-color: #c6c6c6;
}

.scale-text {
  font-size: 24rpx;
  color: #0c3a34;
  text-align: center;
  transform: translateX(-50%);
  position: absolute;
  bottom: 0;
}

.pointer {
  position: absolute;
  top: -60rpx;
  //   width: 28rpx;
}

.pointer-value {
  font-size: 18px;
  font-weight: bold;
  color: #00d1b6;
  text-align: center;
  transform: translateX(-50%);
}
.point-wrap {
  position: relative;
  height: 50rpx;
  //   text-align: center;
}

.point-image {
  width: 28rpx;
  height: 14rpx;
  position: absolute;
  transform: translateX(-50%);
  top: 0;
  z-index: 2;
}

.point-line {
  width: 4rpx;
  height: 50rpx;
  position: absolute;
  top: 14rpx;
  //   left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  background-color: #00d1b6;
}

.state-box {
  margin-top: 40rpx;
  padding: 0 32rpx;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  .state-item {
    margin-right: 4rpx;
    font-weight: 600;
    font-size: 30rpx;
    color: #ffffff;
    background: #00d1b6;
    padding: 8rpx 0;
    text-align: center;
  }
  .state-item:last-child {
    margin-right: 0;
  }
}
.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  box-sizing: border-box;
  width: 100%;
  padding: 24rpx 32rpx;
  padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  background: #fff;

  .fix-btn {
    width: 100%;
    font-size: 32rpx;
    font-weight: 700;
    color: #fff;
    background: #00d1b6;
    border-radius: 44rpx;
  }
}
</style>
